<template>
<scroll-view :scroll-x="true" class="filterBox2">
    <view class="ItemBox" v-for="item in evt" :key="item.value" @click="seleceType(item.value)">
        <cdn-img 
            :src="`/static/img/filter_${item.icon}.png`" 
            :class="['tag',item.icon,{'select': type==item.value}]" 
            lazyLoad 
        />
        <view class="modename">{{ item.text }}</view>
    </view>
</scroll-view>
<!-- 列表 -->
<view class="task">
    <view class="box" @click="goToDetail(item.id)" v-for="item in list" :key="item.id">
        <view class="between info">
            <view class="info_left">
                <view class="title flex ell">
                    <TypeIcon :type="item.type"/>
                    <text class="text">{{ item.title }}</text>
                </view>
                <view class="tagGroup">
                    <view class="tag fcenter redd" v-if="item.belong_to_admin_id&&item.belong_to_admin_id.shop_tag&&item.belong_to_admin_id.shop_tag.name">{{ item.belong_to_admin_id.shop_tag.name }}</view>
                    <view class="tag fcenter blue">等级LV{{ item.start_level }}</view>
                    <!-- <view class="lv">
                        <cdn-img src="/static/img/star/box.png" class="lv_bg" />
                        <view class="type fcenter">娱乐</view>
                        <view class="lv_num fcenter">等级LV{{ item.start_level }}</view>
                    </view> -->
                    <view class="tag fcenter orange">粉丝≥<text v-if="item.award_rule&&item.award_rule.length>0">{{ transFans(item.award_rule[0].fans_num) }}</text></view>
                </view>
                <view class="ell time">活动截止日期: {{ item.end_time }}</view>
            </view>
            <cdn-img :src="item.upload[0].full_path" v-if="item.upload.length>0" class="pic" mode="aspectFill" :lazyLoad="true"/>
        </view>
        <view class="data">
            <view class="item" v-if="[3,5].indexOf(item.type)===-1">
                <view class="num">￥<text v-if="item.award_rule&&item.award_rule.length>0">{{ item.award_rule[item.award_rule.length-1].money }}</text></view>
                <view class="tit"><text v-if="item.type==1">云剪</text>任务金</view>
            </view>
            <view class="item">
                <view class="num">{{item.brokerage_rate}}%</view>
                <view class="tit">最高佣金比例</view>
            </view>
            <view class="item">
                <view class="num">￥{{ item.tallest_brokerage }}</view>
                <view class="tit">最高带货佣金</view>
            </view>
        </view>
    </view>
    <template v-if="list.length>0">
        <nut-divider v-if="listStatus=='loading'">加载中...</nut-divider>
        <nut-divider v-else-if="listStatus=='nomore'">没有更多了</nut-divider>
    </template>
    <nut-empty description="暂无数据" v-else></nut-empty>
</view>
</template>

<script setup>
import TypeIcon from '@/components/TypeIcon'
import { ref, onBeforeMount, watch } from 'vue'
// import { createSelectorQuery } from '@tarojs/taro'
import { useConfigStore } from "@/stores";
import { navigateTo } from '@/router'
import { activity } from '@/api/index'
import { debounce, transFans } from '@/utils/helper'; 
import "./index.scss";

const emit = defineEmits(['toggle']);
const props = defineProps({
    search: {
        type: String,
        default: "",
    },
})
const config = useConfigStore()
const listStatus = ref('loadmore');
const list = ref([])
const type = ref(0)
const evt = [
    { text: '全部', value: 0, icon: 'all' },
    { text: '云剪', value: 1, icon: 'yj' },
    { text: '实探', value: 2, icon: 'st' },
    { text: '置换', value: 3, icon: 'zh' },
    { text: '纯佣', value: 5, icon: 'cy' },
]
let paging = { page: 1, size: 20 }
let total = 0

function queryList(){
    const type2 = type.value ? type.value: null
    let parame = {...paging, title: props.search||undefined, type: type2, area: config.cityCode[config.cityCode.length-1]}
    activity(parame).then(res=>{
        if(res.meta){
            total = res.meta.last_page
        }
        if(res.data){
            list.value = list.value.concat(res.data)
        }
    })
}
function handleChange(){
    paging.page = 1;
    list.value = [];
    queryList()
}
function seleceType(t){
    if(type.value === t) return
    type.value = t
    handleChange()
}
function openMenu(){
    emit('toggle', true)
}
function closeMenu(){
    emit('toggle', false)
}
onBeforeMount(()=>{
    if(config.cityCode&&config.cityCode.length>1){
        queryList()
    }
})
// 监听参数变化
watch(()=> props.search, debounce(handleChange, 1000))
watch(()=> config.cityCode, ()=>{
    handleChange();
})

const loadMore = () => {
    if(paging.page >= total) return listStatus.value = 'nomore';
    listStatus.value = 'loading'
    if(paging.page < total){
        paging.page += 1;
        queryList()
    }
}
const goToDetail = (id) => {
    navigateTo({ url: '/pagesub/talent-detail/index', params: { id } })
}
defineExpose({
  loadMore,
  handleChange
})
</script>